<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>ProCal-ProSer</title>
	
	<!-- bootstrap -->
	<link href="../../template/css/bootstrap/bootstrap.css" rel="stylesheet" />

	<!-- libraries -->
	<link href="../../template/css/libs/font-awesome.css" type="text/css" rel="stylesheet" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="../../template/css/compiled/layout.css">
	<link rel="stylesheet" type="text/css" href="../../template/css/compiled/elements.css">
	<link rel="stylesheet" href="../../template/css/libs/select2.css" type="text/css" />

	<!-- this page specific styles -->
	<link rel="stylesheet" type="text/css" href="../../template/css/libs/dropzone.css">

	<!-- google font libraries -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>

	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<link href="css/libs/font-awesome-ie7.css" type="text/css" rel="stylesheet" />
	<![endif]-->
</head>
	<script src="../../template/js/jquery.js"></script>
	
<body>
	<script src="../../javascript/Seguridad/header.js"></script>
	<div class="container">
		<div class="row">
			<div class="col-md-2" id="nav-col">
				<script src="../../javascript/Seguridad/section.js"> </script>
			</div>
			<div class="col-md-10 col-sm-11" id="content-wrapper">
				<div class="row">
					<div class="col-lg-12">
						<h1>Listas de Publicaciones</h1>
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box clearfix">
								<form role="form"  action="" id="form">
									<h2>Crear Lista de Publicación</h2>
									<h3><span>Datos Básicos</span></h3>
		                            <div class="row">		                            	
		                                <div class="col-lg-12">		                                    
	                                        <div class="form-group">	                                        	
	                                            <label>Tema</label>
	                                            <div class="input-group">
	                                            	<span class="input-group-addon"><i class="fa fa-book"></i></span>
	                                           		<input type="Tema" class="form-control" id="Tema">							
	                                        	</div>
	                                        </div>	                                                           
		                                </div>
		                            </div>
		                            <h3 ><span>Lecturas a asignar</span></h3>		                            
										<div class="clearfix" id="lectAsig">
											<div class="filter-block pull-right">														<a href="#agregarElemento" class="btn btn-primary pull-right" id="agregar" data-toggle="modal">
													<i class="fa fa-plus-circle fa-lg"></i> 
													<span>Agregar Lectura</span>
												</a>												
											</div>
										</div>
										<div class="table-responsive">
											<table class="table tablesorter" id="tabla2">
												<thead>	
													<tr>
														<th class="text-center">
															<span>Titulo</span>
														</th>
														<th class="text-center">
															<span>Palabras Clave</span>
														</th>
													    <th class="text-center">
															<span>Autor(es)</span>
														</th>
													</tr>
												</thead>
												<tbody id="listaLecturas">
													
												</tbody>											
											</table>
										</div>
										<h3><span>Grupos a asignar</span></h3>
										<div class="row">
	                                		<div class="col-md-6">
		                                        <div class="form-group form-group-select2">
													<select style="width:525px" id="sel2grupo" multiple>							</select>
		                                        </div>
		                                    </div>
		                                    <div class="col-md-6">
	                                    		<div class="filter-block pull-left" >								
													<a href="#detalleGrupo" class="btn btn-primary pull-left" style="width: 155px;" data-toggle="modal">
														<i class="fa fa-plus-circle fa-lg"></i> 
														<span>Crear Grupo</span>
													</a>
												</div>
	                                    	</div>	                                    
	                            		</div>
	                <!--MODAL AGREGAR ELEMENTO-->   	                     
					<div class="modal fade" id="agregarElemento" tabindex="-1" role="dialog" aria-labelledby="agregarElemento" aria-hidden="true">
							<div class="modal-dialog" style="width:900px">
								<div class="modal-content">
								
								<div class="modal-header" id="headerElemento">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h3 class="modal-title" id="tituloModal">Agregar Lectura</h3>
							    </div>
							    <div class="modal-body" id="bodyElemento">
							    	<div class="row">
							    		<div class"col-lg-3">
							    			<div class="filter-block">
												<div class="form-group">
													<input type="text" class="form-control" placeholder="Presionar Enter para iniciar la búsqueda..." id="criterioBusqueda2">
													<i class="fa fa-search search-icon"></i>
												</div>
											</div>
										</div>
									</div>	
									<div class="table-responsive">
									<table class="table tablesorter" id="tabla">
										<thead>	
											<tr>
												<th class="text-center">
													<span>Titulo</span>
												</th>
												<th class="text-center">
													<span>Tipo</span>
												</th>
												<th class="text-center">
													<span>Idioma</span>
												</th>
												<th class="text-center">
													<span>Autor</span>
												</th>
												<th class="text-center">
													<span>Elección</span>
												</th>
											</tr>
										</thead>
										<tbody id="listaPublicaciones">																							
										</tbody>
									</table>
										<div class="row pagination pager pull-right" id="pager" style="display:none;">									 
											<div class="col-md-3"><li><a href="" class=" prev"><i class="fa fa-chevron-left"></i></a></li></div>
											<input type="hidden" class="pagedisplay"></input>
											<div class="col-md-5"><select class="form-control pagenum input-mini" style="height:32px"></select></div>
								            <div class="col-md-3"><li><a href="" class=" next"><i class="fa fa-chevron-right"></i></a></li></div>
								            
								            <li><select style="display:none;" class="pagesize" >
								                <option selected="selected" value="5">5</option>
								                <option value="10">10</option>
								                <option value="20">20</option>
								                <option value="30">30</option>
								                <option value="40">40</option>
								            </select></li>							             
										</div>											
									
									</div>																	
								</div>
								<div class="modal-body">
									<form role="form" id="form-lectura">
										<input type="hidden" id="IDLECTURAASIGNADA" class="form-control" />							<div class="form-group" id="select_div">
											<label for="PALABRACLAVE">Palabras Clave</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-book"></i></span>
												<input type="PALABRACLAVE" class="form-control" id="PALABRACLAVE">
											</div>
										</div>
										<label for="NOTASLECTURA">Notas de Lecturas</label>
											<a class="btn btn-primary pull-right" id="agregarNota">Agregar Nota</a>												
										<div class="form-group" id="notasLectura">
																						
										</div>
										<div class="form-group">
											<label for="OBSERVACIONES">Observaciones</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-edit"></i></span>
												<textarea type="OBSERVACIONES" class="form-control" id="OBSERVACIONES" rows="2"></textarea>
											</div>
										</div>									    
									</form>											
								</div>								
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
									<button type="button" id="guardarLectura" class="btn btn-primary" >
										<span id="tituloBoton"></span>
									</button>									
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->		                     	
					<!--FIN MODAL AGREGAR ELEMENTO-->
					<!--MODAL GRUPOS-->   	                     
					<div class="modal fade" id="detalleGrupo" tabindex="-1" role="dialog" aria-labelledby="detalleGrupo" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h3 class="modal-title" id="tituloModal">Crear Grupo</h3>
									</div>
								<div class="modal-body">
									<form role="form" id="form-etiqueta">
										<div class="form-group">
										<label for="NOMBRES">Nombre del Grupo</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-group"></i></span>
												<input type="NOMBRES" class="form-control" id="NOMBRES" >
											</div>
										</div>
										<div class="form-group">
											<label for="FECHA_CREACION">Fecha de creacion</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
												<input type="FECHA_CREACION" class="form-control" id="FECHA_CREACION" readonly>
											</div>
										</div>
										<div class="form-group">
											<label for="DESCRIPCION">Descripcion</label>
											<div class="input-group">
												<span class="input-group-addon"><i class="fa fa-file"></i></span>
												<textarea type="DESCRIPCION" class="form-control" id="DESCRIPCION" rows="2"></textarea>
											</div>
										</div>
										<h3>Agregar Usuarios</h3>
										<div class="form-group form-group-select2">
                                            <label>Agregar Responsable</label>
											<select style="width:520px" id="sel2Responsable" multiple>
											</select>
                                        </div>
										<div class="form-group form-group-select2">
                                            <label> Integrantes del Grupo</label>
											<select style="width:520px" id="sel2Miembros" multiple>
											</select>
                                        </div>		                                        
									</form>											
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
									<button type="button" id="guardarGrupo" class="btn btn-primary" >
										<span id="tituloBoton">Agregar</span>
									</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->		                     	
					<!--FIN MODAL GRUPOS--> 
		                     <br><br>
		                    <div class="row pull-center">
		                    	<div class="col-md-4"></div>
			                    <div class="col-md-4">     
			                    	<button type="button" class="btn btn-default" value="regresar" onClick="location.href='ViewGestionListaPublicacion.html'">Regresar</button> 	
	                    			<button type="button" class="btn btn-default" id="guardar">Grabar</button>
	                    			<button type="button" class="btn btn-default" id="limpiar">Limpiar</button>
	                    		
                    			</div>
                    			<div class="col-md-4"></div>
                    		</div>
                        	</form>							
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer-bar">
		<p id="footer-copyright">
			&copy; 2014 INV-TOOL. Powered by Nadya - Albert
		</p>
	</footer>
	
	<!-- global scripts -->
	<script src="../../javascript/Busqueda/Busqueda.js"></script>
	<script src="../../javascript/Seguridad/interfaz.js"></script>
	<script src="../../javascript/Seguridad/validation.js"></script>
	<script src="../../template/js/bootstrap.js"></script>
	
	<!-- this page specific scripts -->
	<script src="../../template/js/select2.min.js"></script>
	<script src="../../template/js/dropzone.js"></script>
	<script src="../../javascript/Publicacion_Documental/listaPublicacionRegistro.js"></script>

	<!-- theme scripts -->
	<script src="../../template/js/scripts.js"></script>
	
	<!-- this page specific inline scripts -->

	<!-- Tablesorter: required for bootstrap -->
    <script src="../../javascript/tablesorter/js/jquery.tablesorter.js"></script>
    <script src="../../javascript/tablesorter/js/jquery.tablesorter.widgets.js"></script>

    <!-- Tablesorter: optional -->
    <script src="../../javascript/tablesorter/js/jquery.tablesorter.pager.js"></script>

    <!-- Tablesorter: Config bootstrap -->
    <script src="../../javascript/tablesorter/js/config.js"></script>
    
    <!-- Tablesorter: Config filtros -->
    <script src="../../javascript/tablesorter/js/filtros.js"></script>

</body>
</html>